<template>
  <div class="page box">
    <!-- 国际化切换 -->
    <div class="lang-btn">
      <lang></lang>
    </div>

    <div class="bg"></div>

    <van-pull-refresh v-model="loading" @refresh="onRefresh">
      <!-- 基本信息 -->
      <div class="ta-center pt-30">
        <div class="cl-white mb-15">
          <div>{{ $t('钱包地址') }}：{{ fromAddressRef }}</div>
          <div>PC：{{ amount }}</div>
        </div>

        <div class="cl-white mb-15">
          <div>{{ $t('奖池地址') }}：{{ jackpotAddressRef }}</div>
          <div>PC：{{ jackpotAmount }}</div>
        </div>

        <img style="width: 100%" src="@/assets/img/banner.png" />
      </div>

      <!-- 邀请链接 -->
      <div class="container mb-15">
        <span class="mr-10">{{ $t('我的邀请链接') }}：{{ inviteLink }}</span>
        <span class="btn btn--small click" @click="copyString(inviteLink)">
          {{ $t('复制') }}
        </span>
      </div>

      <!-- 玩法 -->
      <div class="play-list container pl-30 pr-30 ta-center flex flex-rb mb-15">
        <div class="play-list__item active click" @click="playIndex = 0">
          <img class="mb-5" style="width: 60px" src="@/assets/img/icon1.png" />
          <div class="fz-17">{{ $t('单双大小') }}</div>
        </div>
        <div class="play-list__item click" @click="showToast($t('暂未开放'))">
          <img class="mb-5" style="width: 60px" src="@/assets/img/icon2.png" />
          <div class="fz-17">{{ $t('猜数字') }}</div>
        </div>
        <div class="play-list__item click" @click="showToast($t('暂未开放'))">
          <img class="mb-5" style="width: 60px" src="@/assets/img/icon3.png" />
          <div class="fz-17">{{ $t('大赢家') }}</div>
        </div>
      </div>

      <!-- 单双大小 -->
      <play1 v-if="playIndex == 0"></play1>
    </van-pull-refresh>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useStore } from '@/store/index'
import { showToast, toNumber, copyString } from 'js/utils'
import api from 'js/api'
import mitt from 'js/mitt'
import play1 from 'comps/play_1.vue'

const store = useStore()

const fromAddressRef = ref(window.fromAddressHide)
const jackpotAddressRef = ref(window.jackpotAddressHide)

const amount = ref(0)
const jackpotAmount = ref(0)

const inviteLink = ref(
  `${location.href}?superiorWalletAddress=${window.fromAddress}`
)

const playIndex = ref(0)

const loading = ref(false)

getAmount()
getJackpotAmount()
getConfig()

mitt.on('refresh', () => {
  setTimeout(() => {
    getAmount()
    getJackpotAmount()
    getConfig()
  }, 3000)
})

// 获取钱包余额
async function getAmount() {
  const params = {
    fromAddress: window.fromAddress,
  }

  const { balance } = await api.getAmount(params)

  amount.value = toNumber(balance?.amount || 0)
  window.userAmount = amount.value
}

// 获取奖池余额
async function getJackpotAmount() {
  const params = {
    fromAddress: window.jackpotAddress,
  }

  const { balance } = await api.getAmount(params)

  jackpotAmount.value = toNumber(balance?.amount || 0)
}

// 获取配置项
async function getConfig() {
  const { code, data } = await api.getConfig()

  if (code === 200) {
    store.setConfig(data)
    window.config = data
    window.toAddress = data.checkWallet
  }
}

// 下拉刷新
function onRefresh() {
  mitt.emit('refresh')

  setTimeout(() => {
    loading.value = false
  }, 1000)
}
</script>

<style lang="scss" scoped>
.page {
  .lang-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 10;
  }

  .bg {
    position: fixed;
    top: 0;
    left: 50%;
    width: 400px;
    height: 100%;
    background: url('@/assets/img/bg.jpg') repeat left top / cover;
    z-index: -1;
    transform: translateX(-50%);
  }

  .play-list {
    &__item {
      filter: brightness(0.8);

      &.active {
        filter: brightness(1);
      }

      img {
        display: inline-block !important;
      }
    }
  }

  :deep(.van-pull-refresh) {
    .van-loading__text,
    .van-loading__spinner {
      color: white;
    }
  }
}
</style>
